<template>
    <div class="my">
        <Header :title="title"></Header>
        <header>
            <div class="set">
                <p>我要卖货</p>
                <img src="../../assets/set.png" alt="设置">
            </div>
            <div class="page">
                <img class="chathead" src="http://b2bbucket-1254060329.picbj.myqcloud.com//bc62ba581d8048ffba09ef1206414e3a.o6zAJs40K6GJbyizSOz14zgmmCiA.t7cF1ZhdUoTw4e0367e1752809d689333aaeb4909b16.png" alt="头像">
                <div class="information">
                    <p>fadg465</p>
                    <span>1684654185</span>
                </div>
                <img class="right_arr" src="../../assets/right-arr.png">
            </div>
        </header>
        <div class="order">
            <div class="header">
                <p>我的订单</p>
                <div>
                    <p>查看全部</p>
                    <img src="../../assets/right-fill.png">
                </div>
            </div>
            <div class="con">
                <div v-for="(item,i) in order" :key="i">
                    <img :src="item.img" :alt="item.title">
                    <p>{{item.title}}</p>
                </div>
            </div>
        </div>
        <nav>
            <div>
                <h1>{{navlist.COUPON || 0}}</h1>
                <p>优惠券</p>
            </div>
            <div>
                <h1>{{navlist.COLLECTGOODCOUNT || 0}}</h1>
                <p>商品收藏</p>
            </div>
            <div>
                <h1>{{navlist.COLLECTDEALERCOUNT || 0}}</h1>
                <p>店铺收藏</p>
            </div>
            <div>
                <h1>{{navlist.USERDEALERRELCOUNT || 0}}</h1>
                <p>我的供应商</p>
            </div>
        </nav>
        <div class="logistics">
            <div class="left">
                <p>最新物流</p>
                <p>20:37:35</p>
            </div>
            <div class="right">
                <img src="../../assets/Bitmap.png" alt="">
                <div>
                    <div>
                        <p>待收货</p>
                        <span>订单编号：887654433388888</span>
                    </div>
                    <p>【运单1】您的订单已经打包完成,准备出库</p>
                </div>
            </div>
        </div>
        <p class="head">
            <img src="../../assets/red-left-icon.png" alt="左">
            最近浏览
            <img src="../../assets/red-right-icon.png" alt="右">
        </p>
        <ul>
            <li v-for="(item,i) in list" :key="i">
                <img v-bind="{src: item.mainPic ? item.mainPic : require('../../assets/Bitmap.png') }" alt="">
                <div>
                    <p class="title">{{item.goodsName}}</p>
                    <div>
                        <div class="price"><p> <span>￥</span> {{item.orderPrice | numFilter}}</p><span>1{{item.quantityUnit}}起批</span></div>
                        <p>{{item.dealer?item.dealer.name:''}}</p>
                    </div>
                    <img src="../../assets/to_shop.png" alt="">
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import Header from '@/components/Header.vue'
import api from '../../utils/api';
import store from '../../store';
import qs from 'qs';
import { setTimeout } from 'timers';
export default {
    name: "my",
    components:{
        Header
    },
    data(){
        return {
            title: "我的",
            order:[
                {
                    img: require("../../assets/daifukuan.png"),
                    title: "待付款",
                },
                {
                    img: require("../../assets/daifahuo.png"),
                    title: "待发货",
                },
                {
                    img: require("../../assets/daishouhuo.png"),
                    title: "待收货",
                },
                {
                    img: require("../../assets/yiwancheng.png"),
                    title: "已完成",
                }
            ],
            navlist:{},
            list:[],
        }
    },
    methods:{
        getCountOrder(loginInfo){
            var that = this;
            api.post("/countOrder",{
                merchantId: loginInfo.merchantId,
                userId: loginInfo.userId
            },"get")
            .then(res=>{
                if(res.data.status.statusCode === 0){
                    that.navlist={
                        COUPON: res.data.result.COUPON,
                        COLLECTGOODCOUNT: res.data.result.COLLECTGOODCOUNT,
                        COLLECTDEALERCOUNT: res.data.result.COLLECTDEALERCOUNT,
                        USERDEALERRELCOUNT: res.data.result.USERDEALERRELCOUNT
                    }
                    that.getGoodsRecordByUserId(loginInfo)
                }else{
                    console.log(res)
                }
            })
        },
        getGoodsRecordByUserId(loginInfo){
            var that = this;
            api.post("/getGoodsRecordByUserId",{
                dealerId: loginInfo.dealerId,
                groupStoreId: loginInfo.storeId,
                merchantId: loginInfo.merchantId,
                pageNum:1,
                pageSize:20,
                shopId: loginInfo.storeCustId,
                stationId: loginInfo.stationId,
                userId: loginInfo.userId
            },"post")
            .then(res=>{
                if(res.data.status.statusCode === 0){
                    that.list = res.data.result;
                }else{
                    console.log(res)
                }
            })
        }
    },
    mounted(){
        var that = this;
        setTimeout(()=>{
            var loginInfo = that.$store.state.loginInfo;
            if(typeof loginInfo == "string"){
                loginInfo = JSON.parse(that.$store.state.loginInfo);
            }else if(typeof loginInfo == "object" && that.$store.state.token){
                loginInfo = that.$store.state.loginInfo;
            }
            that.getCountOrder(loginInfo)
        },100)
    },
}
</script>

<style lang="scss" scoped>
.my{
    background-color: #eee;
    padding-bottom: .5rem;
    header{
        height: 1rem;
        padding: .1rem .14rem .3rem;
        background-image: linear-gradient(-90deg, #f46839 3%, #d33 100%);
        .set{
            width: 100%;
            height: .24rem;
            img{
                width: .18rem;
                height: .18rem;
                margin: .02rem .24rem;
                float: right;
            }
            p{
                height: .13rem;
                font-size: .14rem;
                line-height: .14rem;
                color: #FFFFFF;
                border: .005rem solid #FFFFFF;
                border-radius: 1rem;
                padding: .05rem .11rem;
                float: right;
            }
        }
        .page{
            width: 100%;
            height: .7rem;
            .chathead{
                width: .6rem;
                height: .6rem;
                margin: .05rem 0;
                float: left;
            }
            .information{
                width: 1rem;
                height: .7rem;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
                color: #FFFFFF;
                text-align: left;
                margin-left: .15rem;
                p{
                    font-size: 16px;
                    line-height: 16px;
                    margin-bottom: .1rem;
                }
                span{
                    font-size: 12px;
                    line-height: 12px;
                    opacity: 0.8;
                }
            }
            .right_arr{
                width: .12rem;
                height: .12rem;
                float: right;
                margin: .29rem 0;
            }
        }
    }
    .order{
        height: 1.3rem;
        margin: -0.3rem .1rem 0;
        background: #FFFFFF;
        border-radius: .04rem;
        .header{
            padding: .13rem .14rem;
            height: .14rem;
            line-height: .14rem;
            position: relative;
            display: flex;
            justify-content: space-between;
            >P{
                font-size: .14rem;
                color: #333;
                font-weight: 700;
            }
            div{
                display: flex;
                justify-content: space-between;
                >P{
                    font-size: .12rem;
                    color: #666;
                    margin-right: .08rem;
                }
                img{
                    width: .12rem;
                    height: .12rem;
                }
            }
        }
        .header:after{
            content: "";
            width: 100%;
            height: 1px;
            transform: scaleY(.5);
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #eee;
        }
        .con{
            overflow: hidden;
            padding: .13rem 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            div{
                font-size: .12rem;
                >img{
                    width: .24rem;
                    height: .24rem;
                    margin-bottom: .14rem;
                }
            }
        }
    }
    nav{
        height: .4rem;
        margin: .1rem;
        padding: .2rem 0;
        background-color: #fff;
        border-radius: .04rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        div{
            line-height: .12rem;
            h1{
                font-size: .2rem;
                color: #333;
                margin-bottom: .14rem;
            }
            P{
                font-size: .12rem;
                color: #333;
            }
        }
    }
    .logistics{
        overflow: hidden;
        padding: .2rem .12rem;
        margin: 0 .1rem;
        background-color: #fff;
        border-radius: .04rem;
        .left{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            float: left;
            padding-right: .14rem;
            position: relative;
            border-right: .005rem solid #eee; 
            p{
                margin: .05rem 0;
                font-size: .1rem;
                line-height: .1rem;
                color: #999;
            }
        }
        .left:after{
            content: "";
            width: .05rem;
            height: .05rem;
            position: absolute;
            top: .18rem;
            right: -0.025rem;
            border-radius: 50%;
            background-color: #ddd;
        }
        .right{
            width: 2.76rem;
            float: left;
            img{
                width: .36rem;
                height: .36rem;
                margin: 0 .1rem 0 .14rem;
                float: left;
            }
            >div{
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                >div{
                    margin: .05rem 0;
                    display: flex;
                    justify-content: space-between;
                    p{
                        color: #d33;
                        font-size: .12rem;
                        line-height: .12rem;
                    }
                    span{
                        color: #999;
                        font-size: .1rem;
                        line-height: .12rem;
                    }
                }
                >p{
                    margin: .05rem 0;
                    font-size: .11rem;
                    line-height: .11rem;
                    position: relative;
                    left: -0.04rem;
                }
            }
        }
    }
    .head{
        width: 100%;
        height: .16rem;
        padding: .12rem 0;
        margin: 0 auto;
        font-family: PingFangSC-Semibold;
        font-size: .14rem;
        line-height: .14rem;
        color: #F36639;
        img{
            width: .27rem;
            height: .16rem;
            vertical-align: middle;
        }
    }
    ul{
        overflow: hidden;
        background-color: #fff;
        li{
            padding: .13rem .14rem .26rem;
            display: flex;
            justify-content: space-between;
            >img{
                width: 1rem;
                height: 1rem;
            }
            >div{
                width: 2.35rem;
                height: 1rem;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .title{
                    font-size: .14rem;
                    text-align: left;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                >div{
                    .price{
                        width: 1rem;
                        font-size: .1rem;
                        color: #ccc;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;
                        >P{
                            font-size: .14rem;
                            color: #d33;
                            >span{
                                font-size: .1rem;
                            }
                        }
                    }
                    >p{
                        font-size: .1rem;
                        color: #ccc;
                        text-align: left;
                        margin-top: .05rem;
                    }
                }
                >img{
                    width: .16rem;
                    height: .16rem;
                    position: absolute;
                    right: .1rem;
                    bottom: .1rem;
                }
            }
        }
    }
}
</style>